<div class="container">
  <div class="content">
    <div class="top">
      <div class="header">
        <!-- <img src="./assets/images/logo.svg" alt="" class="logo"> -->
        <span class="title">后台管理系统</span>
      </div>
      <div class="desc">Background Management System</div>
    </div>
    <div class="main">
      <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
        <nz-alert *ngIf="loginError" nzType="error" [nzMessage]="errorMessage" nzShowIcon style="margin-bottom: 24px;"></nz-alert>
        <ng-template #userTpl>
          <i nz-icon nzType="user" nzTheme="outline" style="color: #1890ff;"></i>
        </ng-template>
        <ng-template #lockTpl>
          <i nz-icon nzType="lock" nzTheme="outline" style="color: #1890ff;"></i>
        </ng-template>
        <ng-template #mailTpl>
          <i nz-icon nzType="mail" nzTheme="outline" style="color: #1890ff;"></i>
        </ng-template>

        <nz-form-item>
          <nz-form-control nzErrorTip="请输入用户名!">
            <nz-input-group [nzPrefix]="userTpl" [nzSize]="'large'">
              <input type="text" nz-input formControlName="accountNumber" placeholder="用户名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入密码！">
            <nz-input-group [nzPrefix]="lockTpl" [nzSuffix]="suffixTemplate" [nzSize]="'large'">
              <input [type]="passwordVisible ? 'text' : 'password'" nz-input formControlName="passWord" placeholder="密码" />
            </nz-input-group>
            <ng-template #suffixTemplate>
              <i [hidden]="!validateForm.value.passWord" nz-icon [nzType]="passwordVisible ? 'eye' : 'eye-invisible'" (click)="passwordVisible = !passwordVisible"></i>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="isVerifCode">
          <nz-form-control nzErrorTip="请输入验证码！">
            <div nz-row [nzGutter]="8">
              <div nz-col nzSpan="16">
                <nz-input-group [nzPrefix]="mailTpl" [nzSize]="'large'">
                  <input nz-input formControlName="codetemp" placeholder="验证码" />
                </nz-input-group>
              </div>
              <div nz-col nzSpan="8">
                <div class="verif-code">
                  <ng-container *ngIf="deadlineTime == 0;else templateCode">
                    <button type="button" nz-button [nzSize]="'large'" class="verif-code" (click)="getMobileCode()">获取验证码</button>
                  </ng-container>
                  <ng-template #templateCode>
                    <button type="button" nz-button [nzSize]="'large'" class="verif-code" disabled>{{ deadlineTime }}s</button>
                  </ng-template>
                </div>
              </div>
            </div>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-control>
            <button nz-button class="login" [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="isSpinning">登 录</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
  </div>
</div>

